<template>
  <div :class="outerClass" class="none" :style="{width:outerWidth,height:outerheight}">
    <div :class="groupClass" class="none box-flex" style="width:100%;height:100%">
      <span :class="lableOutClass" class="none">
        <label :class="lableClass" class="none">{{labelMessage}}</label>
        <span></span>
      </span>
      <span :class="inputOutClass" class="none">
        <input
          v-model="value"
          :class="inputClass"
          :type="inputType"
          :placeholder="inputPlaceholder"
          class="none"
        >
      </span>
      <span :class="promptOutClass" class="none">
        <span :class="promptClass" class="none" v-show="isShowPrompt">{{promptMessage}}</span>
      </span>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
let ERROR = "ERROR";
export default {
  name: "InputOne",
  props: {
    outerWidth: {
      //最外层宽度
      type: String,
      default: "400px",
      require: true
    },
    outerheight: {
      //最外层高度
      type: String,
      default: "60px",
      require: true
    },
    outerClass: {
      //最外层样式
      type: String,
      default: ""
    },
    groupClass: {
      //组样式
      type: String,
      default: ""
    },
    lableOutClass: {
      type: String,
      default: ""
    },
    lableClass: {
      type: String,
      default: ""
    },
    inputOutClass: {
      type: String,
      default: ""
    },
    inputClass: {
      type: String,
      default: ""
    },
    promptOutClass: {
      type: String,
      default: ""
    },
    promptClass: {
      type: String,
      default: ""
    },
    labelMessage: {
      type: String,
      default: ""
    },
    inputInitValue: {
      type: String,
      default: ""
    },
    inputType: {
      type: String,
      default: "text"
    },
    inputPlaceholder: {
      type: String,
      default: ""
    },
    promptMessage: {
      type: String,
      default: ""
    },
    checkedReg: {
      type: String,
      default: ".*"
    },
    getValue: {
      type: Function,
      default: value => {},
      require: true
    }
  },
  data() {
    return {
      isRight: true,
      value: this.inputInitValue
    };
  },
  computed: {
    isShowPrompt() {
      return !this.isRight;
    }
  },
  updated() {
    this.inputChecked();
    if (this.getValue instanceof Function) {
      if (this.isRight) this.getValue(ERROR);
      else this.getValue(this.value);
    }
  },
  methods: {
    inputChecked() {
      let reg = new RegExp(this.checkedReg);
      let result = reg.test(this.value);
      this.isRight = result;
    }
  }
};
</script>
<style scoped>
.none {
  padding: 0;
  margin: 0;
}
.box-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
